<template>
    <div
    :id="props.id"
      :class="props.required ? 'contact' : 'bg'"
      :style="{ width: props.width, padding: props.padding }"
    >
      <TitleItem :required="true" :title="props.title"></TitleItem>
      <slot>
        <MyDropItem :item="item" v-for="item in expressionList"> </MyDropItem>
      </slot>
    </div>
  </template>
  
  <script setup>
  const props = defineProps({
    required: {
      type: Boolean,
      required: false,
    },
    width: {
      type: String,
      default: "",
    },
    padding: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: [],
    },
  });
//项目经验
const expressionList = ref([
  {
    title: "鄂尔多斯火力发电厂环保批文3",
    text: "该项目是为鄂尔多斯火力发电厂提供环保批文服务。通过深入研究和了解环保法规，我们将帮助该厂获得合法的环保批文，确保其生产过程符合环保要求，对环境造成的影响最小化。我们的专业团队将竭尽全力为该厂提供高质量的服务，以确保其在环保方面达到最佳水平",
    time: "2019.08~2020.08",
  },
  {
    title: "鄂尔多斯火力发电厂环保批文4",
    text: "该项目是为鄂尔多斯火力发电厂提供环保批文服务。通过深入研究和了解环保法规，我们将帮助该厂获得合法的环保批文，确保其生产过程符合环保要求，对环境造成的影响最小化。我们的专业团队将竭尽全力为该厂提供高质量的服务，以确保其在环保方面达到最佳水平",
    time: "2019.08~2020.08",
  },
  {
    title: "鄂尔多斯火力发电厂环保批文3",
    text: "该项目是为鄂尔多斯火力发电厂提供环保批文服务。通过深入研究和了解环保法规，我们将帮助该厂获得合法的环保批文，确保其生产过程符合环保要求，对环境造成的影响最小化。我们的专业团队将竭尽全力为该厂提供高质量的服务，以确保其在环保方面达到最佳水平",
    time: "2019.08~2020.08",
  },
]);
  </script>
  
  <style scoped lang="scss">
  .bg{
    background-color: #fff;
  }
  .contact {
    background-color: #fff;
    padding: 40px;
    transition: all 0.5s ease-in-out;
  }
  .contact:hover {
    /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    //box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
    //transform: translateY(-3px);
  }
  .big-title {
    padding-bottom: 20px;
    border-bottom: 2px solid #f4f4f4;
    border-radius: 0;
  }

  </style>
  